<template>
  <div class="container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索 -->
        <div>
          <el-form
            :inline="true"
            :model="requestParams"
            size="small"
            label-width="80px"
            ref="requestParams"
          >
            <el-row>
              <el-col class="box">
                <el-form-item label="关键字">
                  <el-input
                    class="input"
                    v-model="requestParams.keyword"
                    placeholder="根据编号搜索"
                    @keyup.enter.native="getList"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button @click="onClear">消除</el-button>
                  <el-button type="primary" @click="getList">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <!-- 搜索 -->
        <!-- 弹框 -->
        <el-alert
          type="info"
          :title="`数据一共 ${this.total} 条`"
          class="alert"
          show-icon
        >
        </el-alert>
        <!-- 弹框 -->
        <!-- 数据列表 -->
        <template>
          <el-table
            style="width: 100%"
            highlight-current-row
            fit
            :data="dataList"
          >
            <el-table-column label="编号" width="220">
              <template slot-scope="scope">
                <span>{{ scope.row.id }}</span>
              </template>
            </el-table-column>
            <el-table-column label="题型" width="80">
              <template slot-scope="scope">
                <span v-if="scope.row.questionType == 1">单选</span>
                <span v-else-if="scope.row.questionType == 2">多选</span>
                <span v-else>简答</span>
              </template>
            </el-table-column>
            <el-table-column label="题目编号" width="220">
              <template slot-scope="scope">
                <div
                  @click.prevent="onQuestionView(item.id)"
                  :key="index"
                  v-for="(item, index) in scope.row.questionIDs"
                  style="color: rgb(0, 153, 255);"
                >
                  {{ item.number }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="录入时间" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.addTime | parseTimeByString }}</span>
              </template>
            </el-table-column>
            <el-table-column label="答题时间(s)">
              <template slot-scope="scope">
                <span>{{ scope.row.totalSeconds }}</span>
              </template>
            </el-table-column>
            <el-table-column label="正确率(%)">
              <template slot-scope="scope">
                <span>{{ scope.row.accuracyRate }}</span>
              </template>
            </el-table-column>
            <el-table-column label="录入人">
              <template slot-scope="scope">
                <span>{{ scope.row.userName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80">
              <template slot-scope="scope">
                <el-button
                  ref="delete-btn"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  plain
                  size="small"
                  @click="onDelete(scope.row.id)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!-- 数据列表 -->
        <!-- 分页 -->
        <el-pagination
          style="margin-top:20px;text-align:right"
          background
          layout="prev, pager, next, sizes, jumper"
          :total="total"
          :page-size="requestParams.pagesize"
          :current-page="requestParams.page"
          @current-change="pager"
          :page-sizes="[10, 20, 30, 50, 100]"
          @size-change="handleSizeChange"
          hide-on-single-page
        ></el-pagination>
        <!-- 分页 -->

        <!-- 预览 -->
        <el-dialog
          title="题目预览"
          :visible.sync="isQuestionsPreviewDialogVisible"
          width="45%"
          v-if="isQuestionsPreviewDialogVisible"
          @close="previewId = 0"
        >
          <questions-preview :id="previewId" />
          <span slot="footer" class="dialog-footer">
            <el-button
              type="primary"
              @click="isQuestionsPreviewDialogVisible = false"
              >关 闭</el-button
            >
          </span>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { randoms, detail, removeRandoms } from '@/api/hmmm/questions'
import QuestionsPreview from '../components/questions-preview'
export default {
  name: 'QuestionsRandoms',
  components: {
    QuestionsPreview
  },
  data() {
    return {
      dataList: [], // 列表数据
      total: 0, // 获取总条数
      requestParams: {
        page: 1,
        pagesize: 10,
        keyword: null
      },
      isDialogShow: false,
      questionInfo: {},
      // 预览
      isQuestionsPreviewDialogVisible: false,
      previewId: 0
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取列表数据
    async getList() {
      const { data: res } = await randoms(this.requestParams)
      this.dataList = res.items

      // 获取总条数
      this.total = res.counts
    },
    // 切换条数
    handleSizeChange(size) {
      this.requestParams.pagesize = size
      this.getList()
    },
    // 切换分页
    pager(np) {
      this.requestParams.page = np
      this.getList()
    },
    // 清空搜索
    onClear() {
      this.requestParams.keyword = null
      this.getList()
    },
    // 删除题库
    async onDelete(id) {
      console.log(this.$refs['delete-btn'])
      const confirm = await this.$confirm(
        '此操作将永久删除该题目, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(e => e)
      if (confirm !== 'confirm') return
      try {
        await removeRandoms({ id })
        this.$message.success('删除成功!')
        if (this.dataList.length === 1) {
          this.requestParams.page =
            this.requestParams.page === 1 ? 1 : this.requestParams.page - 1
        }
        this.getList()
      } catch (err) {
        this.$message.error('删除失败')
      }
    },
    // 试题预览
    async onQuestionView(id) {
      this.previewId = id
      this.isQuestionsPreviewDialogVisible = true
    }
  }
}
</script>

<style scoped lang="less">
.box {
  display: flex;
  justify-content: space-between;
}
.alert {
  margin-bottom: 15px;
}
.app-container {
  padding: 10px;
}
.input {
  width: 330px;
}
/deep/ .el-dialog__footer {
  display: flex;
  justify-content: flex-end;
}
</style>
